<template>
<div class="history">
  <h1 style="color: #ffffff ; letter-spacing: 0.1em">诊断记录</h1>
  <el-table
      :data="tableData
      .filter(data => !search || data.doctor.includes(search)||data.recordDate.includes(search) || data.cureDescription.includes(search))"
      style="width: 100%;" highlight-current-row

  >
    <el-table-column label="id" prop="id" align="center" :sortable="true"> </el-table-column>
    <el-table-column label="日期" prop="recordDate" align="center" :sortable="true"> </el-table-column>
    <el-table-column label="病情描述" prop="cureDescription" align="center"></el-table-column>
    <el-table-column label="主治医生" prop="doctor" align="center"/>
<!--    <el-table-column label="诊断状态" prop="status" align="center"></el-table-column>-->
<!--    <el-table-column label="诊室" prop="room" align="center"/>-->
<!--    <el-table-column label="诊断结果" prop="result" align="center">
      <template #default="scope">
        <el-tag disable-transitions type="plain" >{{scope.row.result}}</el-tag>
      </template>
    </el-table-column>-->
    <el-table-column align="center">
      <template #header>
        <el-input v-model="search"  placeholder="输入关键字搜索" style="width: 250px;height: 60px;"/>
      </template>
      <template #default="scope">
        <el-button size="mini" type="primary" @click="showDetails(scope)"
        >详情</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination layout="prev, pager, next ,sizes,jumper" :total="page.total" background
                   :page-sizes="sizes" :current-page="page.current" prev-text="上一页" next-text="下一页" :page-size="page.size"
                   @size-change="changeSize" @current-change="changeCurrent"
    > </el-pagination>
  </div>
</div>
</template>

<script>
import {getRecord} from "../../api/api";
import {ElMessage} from "element-plus";

export default {
  name: "Index",
  mounted() {
    this.tableData.length = 0
    getRecord({
      page: this.page.current,
      size: this.page.size
    },{
      "satoken": localStorage.getItem("satoken")
    })
    .then(res=>{
      //console.log(res)

      if (res.ret === 0){
        res.list.forEach(value=>{
          this.tableData.push(value)
        })
        ElMessage.success({
          type:'success',
          message: res.description
        })
        this.page.total = res.count
      }else{
        ElMessage.error({
          type: 'error',
          message: res.description
        })
      }
    })
    .catch(err=>{
      console.log(err)
      ElMessage.error({
        type: 'error',
        message: '请稍后再试'
      })
    })
  },
  data(){
    return{
      search:'',
      page:{
        size: 5,
        total: 10,
        current: 1
      },
      sizes: [1,2,5,8,10],
      tableData:[

      ],
    }
  },
  methods:{

    changeCurrent(value){
      this.tableData.length = 0
      getRecord({
        page: value,
        size: this.page.size
      },{
        "satoken": localStorage.getItem("satoken")
      })
          .then(res=>{
            console.log(res)
            if (res.ret === 0){
              this.tableData = res.list
              ElMessage.success({
                type:'success',
                message: res.description
              })
            }else{
              ElMessage.error({
                type: 'error',
                message: res.description
              })
            }
          })
          .catch(err=>{
            console.log(err)
            ElMessage.error({
              type: 'error',
              message: '请稍后再试'
            })
          })
    },
    changeSize(value){
      this.page.size = value
      this.tableData.length = 0
      getRecord({
        page: this.page.current,
        size: value
      },{
        "satoken": localStorage.getItem("satoken")
      })
          .then(res=>{
            console.log(res)

            if (res.ret === 0){
              this.tableData = res.list
              ElMessage.success({
                type:'success',
                message: res.description
              })
            }else{
              ElMessage.error({
                type: 'error',
                message: res.description
              })
            }
          })
          .catch(err=>{
            console.log(err)
            ElMessage.error({
              type: 'error',
              message: '请稍后再试'
            })
          })
    },

    //展示这次诊断记录所有信息，包括医生，诊断费用，诊断材料，诊断结果等
    showDetails(scope){
      this.$router.push(
          {
            path: '/user/orderDetails',
            query:{
              id: scope.row.id,
            }
          }
      )
    }

  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
}
</script>

<style scoped>
.block{
  margin-top: 20px;
  background: rgba(255,255,255,.8);

}

::v-deep(.el-table tr){

  font-size: 20px;
}
.history{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  width: 100%;
  height: 600px;

}
</style>